<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <!--公共样式-->
    <link rel="stylesheet" type="text/css" href="/static/css/common.css">
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="/static/css/Lstyle.css">
    <title></title>
    <style type="text/css">
        html, body {
            height: 100%;
        }
    </style>
</head>
<body>
<!-- 页面头部 -->
<div class="header">
    <div class="header_wrap">
        <div class="header_lt">
            <h3>武汉市森林公安大数据平台</h3>
        </div>
        <div class="header_rt">
            <ul class="header_ul clearfix">
                <li><a class="menu_item" href="/web/index">主页</a></li>
                <li><a class="menu_item" href="/web/driver">驾驶舱</a></li>
                <li>
                    <span class="menu_item">野生动物</span>
                    <ul class="menu_ul">
                        <li><a href="/web/animal?type=1">一级保护动物</a></li>
                        <li><a href="/web/animal?type=2">二级保护动物</a></li>
                        <li><a href="/web/animal?type=3">三级保护动物</a></li>
                    </ul>
                </li>
                <li>
                    <span class="menu_item">野生植物</span>
                    <ul class="menu_ul">
                        <li><a href="/web/plant?type=1">一级保护植物</a></li>
                        <li><a href="/web/plant?type=2">二级保护植物</a></li>
                        <li><a href="/web/plant?type=3">三级保护植物</a></li>
                    </ul>
                </li>
            </ul>
            <div class="header_user">
                <a href="/web/info" class="user fl"><img src="/static/images/slogo.png"/><span>辛苦了</span></a>
                <div class="logout fl" onclick="location.href='/web/unlogin'"></div>
            </div>
        </div>
    </div>
</div>
<!-- 中间区域 -->
<div class="main indexBg">
    <div class="cockpit_wrap clearfix">
        <!--野生动物-->
        <div class="cockpit_lt">
            <div class="chatBox">
                <h3 class="h3_title clearfix">
                    <a href="#" class="nav_icont fr"></a>
                    <span class="nav_title">野生动物种类</span>
                </h3>
                <div id="chart01" class="charth"></div>
            </div>
            <div class="chatBox">
                <h3 class="h3_title"><span class="nav_title">野生动物数量</span></h3>
                <div id="chart03" class="charth"></div>
            </div>
            <div class="chatBox">
                <h3 class="h3_title"><span class="nav_title">数量稀少动物</span></h3>
                <div id="chart05" class="charth"></div>
            </div>
        </div>
        <div class="cockpit_cent">
            <div class="chatWrap">
                <div class="chat_head">
                    <h3 class="h3_title"><span class="nav_title">11月数据统计</span></h3>
                    <ul class="chatHead_list clearfix">
                        <li><p>滥砍滥伐次数</p>
                            <div class="redColor">2</div>
                        </li>
                        <li><p>森林火灾次数</p>
                            <div class="greenColor">0</div>
                        </li>
                        <li><p>木材偷运次数</p>
                            <div class="yellowColor">1</div>
                        </li>
                    </ul>
                </div>
                <div class="chat_head">
                    <h3 class="h3_title"><span class="nav_title">损坏面积走向</span></h3>
                    <div id="chart07" class="chartd"></div>
                    <div class="chart_line"><a class="chart_btn" href="planimetering.html">无人机面积测量</a></div>
                </div>
            </div>
            <div class="chatItem">
                <div class="chatItem_wrap clearfix">
                    <div class="chatItem_box">
                        <h3 class="h3_notice">通知公告</h3>
                        <ul class="itemBox_list">
                            <li><a href="#"><span class="text">政务110</span> <span
                                class="time">2018.01.31   12:13:32</span></a></li>
                            <li><a href="#"><span class="text">政务110</span> <span
                                class="time">2018.01.31   12:13:32</span></a></li>
                            <li><a href="#"><span class="text">政务110</span> <span
                                class="time">2018.01.31   12:13:32</span></a></li>
                            <li><a href="#"><span class="text">政务110</span> <span
                                class="time">2018.01.31   12:13:32</span></a></li>
                        </ul>
                    </div>
                    <div class="chatItem_box">
                        <h3 class="h3_system">系统升级</h3>
                        <ul class="itemBox_list">
                            <li><a href="#"><span class="text">政务110</span> <span
                                class="time">2018.01.31   12:13:32</span></a></li>
                            <li><a href="#"><span class="text">政务110</span> <span
                                class="time">2018.01.31   12:13:32</span></a></li>
                            <li><a href="#"><span class="text">政务110</span> <span
                                class="time">2018.01.31   12:13:32</span></a></li>
                            <li><a href="#"><span class="text">政务110</span> <span
                                class="time">2018.01.31   12:13:32</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--野生植物-->
        <div class="cockpit_rt">
            <div class="chatBox">
                <h3 class="h3_title clearfix">
                    <a href="#" class="nav_icont fr"></a>
                    <span class="nav_title">野生植物种类</span>
                </h3>
                <div id="chart02" class="charth"></div>
            </div>
            <div class="chatBox">
                <h3 class="h3_title"><span class="nav_title">野生植物数量</span></h3>
                <div id="chart04" class="charth"></div>
            </div>
            <div class="chatBox">
                <h3 class="h3_title"><span class="nav_title">数量稀少植物</span></h3>
                <div id="chart06" class="charth"></div>
            </div>
        </div>
    </div>
    <div class="video_wrap">
        <div class="banImg_wrap">
            <div class="vedio_Box">
                <ul class="vedio_list clearfix">
                    <li>
                        <div class="vdeio_bg" style="background-image: url(/static/img/loginBg.png)"><span
                            class="play_btn"></span></div>
                        <p>滥砍滥伐管理</p>
                    </li>
                    <li>
                        <div class="vdeio_bg" style="background-image: url(/static/img/loginBg.png)"><span
                            class="play_btn"></span></div>
                        <p>森林防火预警</p>
                    </li>
                    <li>
                        <div class="vdeio_bg" style="background-image: url(/static/img/loginBg.png)"><span
                            class="play_btn"></span></div>
                        <p>木材偷运管理</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<h3>2 </h3>
<!-- 页面底部 -->
<div class="footer">
    <div class="footer_wrap">武汉市森林公安局版权所有</div>
</div>

<script type="text/javascript" src="/static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/static/js/base.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script language="javascript">
    var myChart1 = echarts.init(document.getElementById('chart01'));
    var option1 = {
        title: {
            show: "true",//是否显示标题，默认显示，可以不设置
            text: "单位：种",//图表标题文本内容
            textStyle: {//标题内容的样式
                color: '#fff',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontSize: 10,
            },
            left: 50,
            top: 0,
        },
        grid: {
            x: 50,
            y: 20,
            x2: 50,
            y2: 20,
            borderWidth: 1
        },
        xAxis: {
            data: ["一级保护", "二级保护", "三级保护"],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width: '1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                }
            }
        },
        yAxis: {
            splitLine: {show: false},//去除网格线
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width: '1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                }
            }
        },
        series: [{
            name: '野生动物种类',
            type: 'bar',
            barWidth: '20px',
            data: [1, 2, 2],
            itemStyle: {
                normal: {
                    color: function (params) {
                        var colorList = ['#CA3232', '#2BA727', '#CBBA22'];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        textStyle: {color: '#fff'}
                    }
                }
            }
        }]
    };
    myChart1.setOption(option1);

    var myChart2 = echarts.init(document.getElementById('chart02'));
    var option2 = {
        title: {
            show: "true",//是否显示标题，默认显示，可以不设置
            text: "单位：种",//图表标题文本内容
            textStyle: {//标题内容的样式
                color: '#fff',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontSize: 10,
            },
            left: 50,
            top: 0,
        },
        grid: {
            x: 50,
            y: 20,
            x2: 50,
            y2: 20,
            borderWidth: 1
        },
//        tooltip: {
//            formatter: "占比:{c}%",
//            show: true
//        },
        xAxis: {
            data: ["一级保护", "二级保护", "三级保护"],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width: '1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                }
            }
        },
        yAxis: {
            splitLine: {show: false},//去除网格线
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width: '1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                }
            }
        },
        series: [{
            name: '野生植物种类',
            type: 'bar',
            barWidth: '20px',
            data: [0, 3, 2],
            itemStyle: {
                normal: {
                    color: function (params) {
                        var colorList = ['#CA3232', '#2BA727', '#CBBA22'];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        textStyle: {color: '#fff'}
                    }
                }
            }
        }]
    };
    myChart2.setOption(option2);

    var myChart3 = echarts.init(document.getElementById('chart03'));
    option3 = {
        grid: {
            x: 50,
            y: 20,
            x2: 50,
            y2: 20,
            borderWidth: 1
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b} <br/>{a} : {c} (占总比{d}%)"
        },
        series: [
            {
                color: ['#CA3232', '#2BA727', '#CBBA22'],
                name: '数量',
                type: 'pie',
                radius: '60%',
                center: ['50%', '50%'],
                data: [
                    {value: 2, name: '一级保护动物'},
                    {value: 2, name: '二级保护动物'},
                    {value: 2, name: '三级保护动物'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart3.setOption(option3);

    var myChart4 = echarts.init(document.getElementById('chart04'));
    option4 = {
        grid: {
            x: 50,
            y: 20,
            x2: 50,
            y2: 20,
            borderWidth: 1
        },
        tooltip: {
            trigger: 'item',
            formatter: "{b} <br/>{a} : {c} (占总比{d}%)"
        },
        series: [
            {
                color: ['#CA3232', '#2BA727', '#CBBA22'],
                name: '数量',
                type: 'pie',
                radius: '60%',
                center: ['50%', '50%'],
                data: [
                    {value: 0, name: '一级保护植物'},
                    {value: 15, name: '二级保护植物'},
                    {value: 124, name: '三级保护植物'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart4.setOption(option4);

    var myChart5 = echarts.init(document.getElementById('chart05'));


    var data5 = [
            {value: 2, name: '梅尔维尔鲸'},
            {value: 1, name: '野牛'},
            {value: 1, name: '海东青'},
            {value: 1, name: '赤麂'},
            {value: 1, name: '王孜'},

        ],
        option5 = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} <br/>{a}: {c} (占总比{d}%)"
            },
            series: [
                {
                    color: ['#c93231', '#cab929', '#28a62b', '#c89217', '#1870d5'],
                    name: '数量',
                    type: 'pie',
                    radius: ['45%', '65%'],
                    center: ['30%', '50%'],
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: data5,
                }
            ],
            legend: {
                orient: 'vertical',
                itemWidth: 8,
                itemHeight: 8,
                right: '10%',
                top: '10%',
                data: [
                    '梅尔维尔鲸',
                    '野牛',
                    '海东青',
                    '赤麂',
                    '王孜',
                ],
                formatter: function (name) {
                    for (var i = 0; i < data5.length; i++) {
                        if (data5[i].name == name) {
                            return name + '：' + data5[i].value + ' 只'
                        }
                    }
                },
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                }
            },
        };
    myChart5.setOption(option5);

    var myChart6 = echarts.init(document.getElementById('chart06'));
    var data6 = [
            {value: 1, name: '毛在售'},
            {value: 1, name: '二狗子'},
            {value: 2, name: '植物1'},
            {value: 123, name: '123'},
            {value: 12, name: '123123'},
        ],
        option6 = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} <br/>{a}: {c} (占总比{d}%)"
            },
            legend: {
                orient: 'vertical',
                itemWidth: 8,
                itemHeight: 8,
                right: '10%',
                data: [
                    '毛在售',
                    '二狗子',
                    '植物1',
                    '123',
                    '123123',
                ],
                formatter: function (name) {
                    for (var i = 0; i < data5.length; i++) {
                        if (data5[i].name == name) {
                            return name + '：' + data5[i].value + ' 只'
                        }
                    }
                },
                textStyle: {
                    fontSize: 10,
                    color: '#fff'
                }
            },
            series: [
                {
                    color: ['#c93231', '#cab929', '#28a62b', '#c89217', '#1870d5'],
                    name: '数量',
                    type: 'pie',
                    radius: ['45%', '65%'],
                    center: ['30%', '50%'],
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: data6
                }
            ]
        };
    myChart6.setOption(option6);

    var myChart7 = echarts.init(document.getElementById('chart07'));
    option7 = {
        color: ['#FFDB00'],
        grid: {
            x: 50,
            y: 20,
            x2: 50,
            y2: 40,
            borderWidth: 1
        },
//        dataZoom: [{
//            type: 'inside'
//        }, {
//            type: 'slider'
//        }],
        tooltip: {
            formatter: "{c}",
            show: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2018.09', '2018.10', '2018.11', '2018.12', '2019.01', '2019.02', '2019.03', '2019.04'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width: '1'//坐标线的宽度
                },
                axisTick: {
                    show: false
                }
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                    fontSize: 10,
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {show: false},//去除网格线
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width: '1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                    fontSize: 10,
                }
            }
        },
        series: [{
            data: [0, 250, 320, 380, 400, 300, 200, 100],
            type: 'line',
            itemStyle: {
                normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, color: '#feda19' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#5f7526' // 100% 处的颜色
                        }]
                    ), //背景渐变色
                },
            },
            areaStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c} %',
                        textStyle: {color: '#000'}
                    }
                }
            }
        }]
    };
    myChart7.setOption(option7);

</script>

</body>
</html>
